<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
            任何一个元素都可以制定flex布局
            flex布局后，一切子元素的float/clear/vertical-align都失效
        */
        div.divFlex {
            display: flex;
            display: -webkit-flex; /* webkit 兼容写法 例如safari */

            /* 容器的属性 */

            /* 主轴的方向 row row-reverse column column-reverse */
            flex-direction: row-reverse;

            /* 主轴是否换行 nowrap 默认不换行 wrap 向下换行 wrap-reverse 向上换行 */
            flex-wrap: wrap;

            /*
                flex-direction与flex-wrap的简写
                flex-flow: <flex-direction> || <flex-wrap>;
            */

            /*
                主轴的对齐方式
                flex-start
                flex-end
                center
                space-between 两端对其，项目间距相等，紧贴容器。
                space-around 两端对其，项目两侧间隔相等，与容器也有间隔。
             */
            justify-content: space-around;

            /*
                交叉轴对其方式 即与主轴垂直的方向
                flex-start
                flex-end
                center
                baseline 首行文字对其
                stretch 默认占满容器高度
            */
            align-items: baseline;

            /*
                主轴换行时，多行的对其方式，单行时不生效。
                flex-start
                flex-end
                center
                space-between
                space-around
                stretch 多行主轴平分高度，没一行的item占满行高。
            */
            align-content: space-around;
        }

        /* 容器内 项目属性 */
        #flex-item-order {
            /* 在主轴的排列顺序，越小越靠前。默认0。 */
            order: -1;

            /*
                项目的宽度占比，默认是0，即按原有项目宽度展示。
                如果设置了数值，则原有宽度失效，大家按各自数值占比平分宽度。
                如果出现了换行，目前测试结果，似乎此数值也无效，还是以width为准。
            */
            flex-grow: 3;

            /*
                项目缩小占比，似乎在不换行的情况下有效。
            */
            flex-shrink: 2;

            /*
                项目占用主轴的基准大小，目前理解不太深刻，感觉和width差不多。
            */
            flex-basis: 100px;

            /*
                flex是 grow shrink basis 的简写
                flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
            */

            /*
                可以单独设置项目的align，默认auto，可以覆盖 align-items的设置。
            */
            align-self: auto;
        }

        div.flex-item {
            flex-grow: 1;
            /*
                由于设置了flex-grow
                width在不换行时会失效
                如果项目过多时，width是项目的最小值。
            */
            width: 100px;
            height: 100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div id="divFlexTest" class="divFlex">
    <div class="flex-item">111</div>
    <div class="flex-item">222<br/>222</div>
    <div id="flex-item-order" class="flex-item" style="padding-top: 50px;">333</div>
    <div class="flex-item">444</div>
    <div class="flex-item">555</div>
</div>
<span id="spanFlexTest"></span>
</body>
</html>